new Vue({
    el: '#enroll_app',
    delimiters: ['[[', ']]'], // 明确设置Vue.js的模板分隔符
    data: {
        message: '活动报名',
        userInfo: null,  //订单
        // userInfo: {},
        currentTab: 'individual', // 新增：当前选中的tab，默认为个人报名
        formData: {
            name: '',
            company: '', // 对应小程序中的 company
            position: '',
            phone: '',
            email: '',
            training_class_name: '金融AI千人工程先锋营（第一期）', // 新增字段的默认值
            openid: '' // 新增openid字段
        },
        errors: {}, // 用于存储表单验证错误
        submitting: false, // 提交状态
        showSuccessModal: false, // 控制成功弹窗显示
        enrollmentSuccessData: null, // 报名成功后存储的只读信息
        normalPrice: parseFloat(window.PRICE), // 普通价格
        memberPrice: parseFloat(window.PRICE_MEMBER), // 会员价格
        isMember: false, // 是否为深金科协会员单位
        debugMessage: '', // 用于在前端显示调试信息
        targetDate: new Date('2025-09-16T00:00:00').getTime(), // 目标日期：2025年9月16日
        countdownDays: 0 // 倒计时天数
    },
    computed: {
        displayPrice() {
            return this.currentPrice.toFixed(2); // 显示价格，保留两位小数
        },
        currentPrice() {
            return this.isMember ? this.memberPrice : this.normalPrice;
        },
        countdownMessage() {
            if (this.countdownDays > 0) {
                return `\n早鸟价倒计时${this.countdownDays}天！9月16日后：\n\n价格:￥3999元  会员价：￥1999元。`;
            } else {
                return `早鸟价已结束！价格3999，会员价1999。`;
            }
        }
    },
    mounted() {
        this.updateDebugInfo(); // 在 mounted 时更新调试信息
        this.updateCountdown(); // 初始化倒计时
        this.countdownInterval = setInterval(this.updateCountdown, 1000 * 60 * 60); // 每小时更新一次倒计时
        const storedUserInfo = localStorage.getItem('wechatUserInfo');
        if (storedUserInfo) {
            this.userInfo = JSON.parse(storedUserInfo);
            console.log('从 localStorage 获取用户信息:', this.userInfo);
            this.formData.openid = this.userInfo.openid || ''; // 将openid设置到formData
        }
        const userInfoFromUrl = this.parseUserInfoFromUrl();
        if (userInfoFromUrl) {
            this.userInfo = userInfoFromUrl;
            localStorage.setItem('wechatUserInfo', JSON.stringify(userInfoFromUrl));
            console.log('从 URL 获取并保存用户信息:', this.userInfo);
            // 暂时不清除URL中的用户信息参数，以便调试重定向问题
            this.formData.openid = this.userInfo.openid || ''; // 将openid设置到formData
            window.history.replaceState({}, document.title, window.location.pathname);
        }
        if (!this.userInfo) {
            console.log('未检测到用户信息，请点击登录按钮进行微信授权。');
        }

        // 监听 localStorage 变化，实现多页面登录状态同步
        window.addEventListener('storage', this.handleStorageChange);
    },
    beforeDestroy() {
        // 移除事件监听器，防止内存泄漏
        window.removeEventListener('storage', this.handleStorageChange);
        clearInterval(this.countdownInterval); // 清除定时器
    },
    methods: {
        handleStorageChange(event) {
            if (event.key === 'wechatUserInfo') {
                const newUserInfo = event.newValue ? JSON.parse(event.newValue) : null;
                if (JSON.stringify(this.userInfo) !== JSON.stringify(newUserInfo)) {
                    this.userInfo = newUserInfo;
                    this.formData.openid = this.userInfo ? this.userInfo.openid : '';
                    console.log('Storage 变化，更新用户信息:', this.userInfo);
                }
            }
        },
        parseUserInfoFromUrl() {
            const params = new URLSearchParams(window.location.search);
            const openid = params.get('openid');
            if (openid) {
                return {
                    openid: openid,
                    nickname: decodeURIComponent(params.get('nickname') || ''),
                    headimgurl: params.get('headimgurl') || '',
                    sex: params.get('sex') || '',
                    province: decodeURIComponent(params.get('province') || ''),
                    city: decodeURIComponent(params.get('city') || ''),
                    country: decodeURIComponent(params.get('country') || '')
                };
            }
            return null;
        },
        redirectToWechatAuth() {
            const redirectUri = encodeURIComponent(`${window.location.origin}/rzwl/wechat/oauth_callback`);
            const wechatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.WECHAT_APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=enroll#wechat_redirect`;
            window.location.href = wechatAuthUrl;
        },
        onInputChange(field) {
            // 清除对应字段的错误提示
            this.errors[field] = '';
            this.$forceUpdate(); // 强制Vue更新，因为直接修改errors对象可能不会触发响应式更新
        },
        validateForm() {
            const { name, company, position, phone, email } = this.formData;
            const errors = {};
            let isValid = true;

            if (!name.trim()) {
                errors.name = '请输入姓名';
                isValid = false;
            }
            if (!company.trim()) {
                errors.company = '请输入单位';
                isValid = false;
            }
            if (!position.trim()) {
                errors.position = '请输入岗位';
                isValid = false;
            }
            if (!phone.trim()) {
                errors.phone = '请输入电话';
                isValid = false;
            } else if (!/^1[3-9]\d{9}$/.test(phone)) {
                errors.phone = '请输入正确的手机号码';
                isValid = false;
            }
            if (email.trim() && !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(email)) {
                errors.email = '请输入正确的邮箱地址';
                isValid = false;
            }

            this.errors = errors; // 更新错误信息
            return isValid;
        },
        handleSubmit() {
            if (!this.validateForm()) {
                alert('请完善表单信息');
                return;
            }

            // 验证openid
            if (!this.formData.openid) {
                alert('请先进行微信登录');
                this.redirectToWechatAuth();
                return;
            }

            this.submitting = true;
            console.log('提交的报名数据:', { ...this.formData, price: this.currentPrice });

            // 确保提交的formData包含openid、当前价格和isMember状态
            const submitData = {
                ...this.formData,
                openid: this.formData.openid || this.userInfo.openid,
                price: this.currentPrice, // 将当前价格添加到提交数据中
                is_member: this.isMember // 将isMember状态添加到提交数据中
            };
                        
            // 真实后端提交
            axios.post('/rzwl/api/enroll', submitData)
            .then(response => {
                console.log('报名信息提交成功:', response.data);
                this.enrollmentSuccessData = response.data; // 保存报名成功后的数据，以便 goToPayPage 使用
                this.goToPayPage(); // 直接跳转到支付页面
                // 不再显示成功弹窗和只读信息，直接跳转
            })
            .catch(error => {
                    console.error('报名信息提交失败:', error.response ? error.response.data : error.message);
                    alert('报名信息提交失败，请稍后再试。');
            })
            .finally(() => {
                this.submitting = false;
            });
        },
        closeSuccessModal() {
            this.showSuccessModal = false;
            // 弹窗不再使用，此方法可以简化或移除，但为保持结构暂时保留
        },
        goToPayPage() {
            if (this.enrollmentSuccessData && this.enrollmentSuccessData.order_id) {
                // 跳转到支付页面，并传递订单ID
                window.location.href = `/rzwl/pay?order_id=${this.enrollmentSuccessData.order_id}`;
            } else {
                alert('无法获取订单信息，请稍后再试。');
            }
        },
        clearCacheAndReload() {
            if (confirm('确定要清理缓存并强制刷新页面吗？这可能有助于解决显示问题。')) {
                window.location.reload(true);
            }
        },
        logout() {
            if (confirm('确定要登出吗？')) {
                localStorage.removeItem('wechatUserInfo');
                this.userInfo = null;
                window.location.reload(true);
            }
        },
        updateDebugInfo() {
            this.debugMessage = `
                <p><strong>调试信息:</strong></p>
                <p>window.PRICE: ${window.PRICE} (类型: ${typeof window.PRICE})</p>
                <p>window.PRICE_MEMBER: ${window.PRICE_MEMBER} (类型: ${typeof window.PRICE_MEMBER})</p>
                <p>normalPrice (parsed): ${this.normalPrice} (类型: ${typeof this.normalPrice})</p>
                <p>memberPrice (parsed): ${this.memberPrice} (类型: ${typeof this.memberPrice})</p>
                <p>isMember: ${this.isMember} (类型: ${typeof this.isMember})</p>
                <p>currentPrice: ${this.currentPrice} (类型: ${typeof this.currentPrice})</p>
            `;
        },
        updateCountdown() {
            const now = new Date().getTime();
            const timeLeft = this.targetDate - now;
            if (timeLeft > 0) {
                this.countdownDays = Math.ceil(timeLeft / (1000 * 60 * 60 * 24));
            } else {
                this.countdownDays = 0;
            }
        }
    },
    watch: {
        isMember: function(newVal, oldVal) {
            this.updateDebugInfo(); // 当 isMember 变化时更新调试信息
        }
    }
});
